<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>应用拖曳组件实现div拖曳</title> 
<style>
#div1{ width:100px; height:100px; background:red; position:absolute;}
#div2{ width:100px; height:100px; background:yellow; position:absolute; left:100px;}
</style>
<!--引入拖曳组件，在当前页面中应用组件-->
<script src="drag.js"></script>
<script>
window.onload = function(){
       //创建普通拖曳功能的组件
       var drag1 = new Drag();
       drag1.init({ //设置实例配置参数，flag参数使用默认参数值false
            id:'div1',
       });

       //创建只能在可视区拖曳的组件
       var drag2 = new Drag();
       drag2.init({ //设置实例配置参数，flag参数值修改为true
            flag: true,
            id: 'div2'
       }); 
};    

     //定义组件构造函数
     function Drag(){  
               // 公有变量可以写在这里
           // this.xxx = ...
            this.settings = { //在构造函数中设置默认配置参数
                 id : '',//元素id名
                 flag : false //为false时表示是普通拖曳，如果为true，则只能在可视区域中拖曳
            };
     }

     
     /**
     * 定义原型方法
     * 初始化并拖放对象
     * 绑定鼠标按下事件和鼠标释放事件
     * @param {object}            option 配置项
     */
     Drag.prototype.init = function(opt){
          //your complement
     };
       
     //定义原型方法获取鼠标按下时的位置
     Drag.prototype.fnDown = function(ev){
           //your complement
     };
       
     //获取拖曳的对象在移动时的位置
     Drag.prototype.fnMove = function(ev){
          
          //配置参数flag为true时，限制只在可视区中拖曳
          if(this.settings.flag){
               // your complement
          };
           // your complement
     
     }
       
     //释放鼠标时取消鼠标移动和释放事件
     Drag.prototype.fnUp = function(){
            // your complement
     }

     // 你想增加的其他接口
</script>
</head>
<body>
  <div id="div1"></div>
  <div id="div2"></div>
</body>
</html>